export interface ScrollToParams {
    el: HTMLElement
    to: number
    position: string
    duration?: number
    callback?: () => void
  }
  
  const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
    t /= d / 2
    if (t < 1) {
      return (c / 2) * t * t + b
    }
    t--
    return (-c / 2) * (t * (t - 2) - 1) + b
  }
  const move = (el: HTMLElement, position: string, amount: number) => {
    el[position] = amount
  }
  
  export function useScrollTo({
    el,
    position = 'scrollLeft',
    to,
    duration = 500,
    callback
  }: ScrollToParams) {
    const isActiveRef = ref(false)
    const start = el[position]
    const change = to - start
    const increment = 20
    let currentTime = 0
  
    function animateScroll() {
      if (!unref(isActiveRef)) {
        return
      }
      currentTime += increment
      const val = easeInOutQuad(currentTime, start, change, duration)
      move(el, position, val)
      if (currentTime < duration && unref(isActiveRef)) {
        requestAnimationFrame(animateScroll)
      } else {
        if (callback) {
          callback()
        }
      }
    }
  
    function run() {
      isActiveRef.value = true
      animateScroll()
    }
  
    function stop() {
      isActiveRef.value = false
    }
  
    return { start: run, stop }
  }
  